<template>
	<view style="padding: 10px">
		<view style="display: flex; margin-bottom: 10px;">
			<image class="slot-image"
				:src="activityItem?.giPrph ? getActivityItemImage(activityItem?.giPrph) : tempImageUrl"
				mode="widthFix" style="width: 100px; height: 100px"></image>
			<view style="margin-left: 10px">
				<view>{{ activityItem?.giName }}</view>
				<view style="font-size: 14px; color: #a1a3a6; margin-top: 3px">{{ activityItem?.giName }}</view>
				<view style="margin-top: 3px">
					<uni-tag :circle="true" :text="activityItem?.giGrpe + '人团'" type="error" />
				</view>
				<view style="margin-top: 12px">
					<text style="color: red">￥{{ numberFormat(activityItem?.giGppr, 2) }}</text>
					<text
						style="margin-left: 5px; font-size: 12px; text-decoration: line-through">￥{{ numberFormat(activityItem?.giInpr, 2) }}</text>
				</view>
			</view>
		</view>
	</view>

	<uni-list>
		<uni-list-item v-for="(item, index) in spellOrders">
			<!-- 自定义 header -->
			<template v-slot:header>
				<view style="flex: 1; display: flex; align-items: center">
					<image style="width: 40px; height: 40px; border-radius: 20px" :src="item.ggAvat" mode="widthFix">
					</image>
					<view style="margin-left: 8px; font-size: 13px">{{ item.ggWcna }}</view>
				</view>
			</template>
			<!-- 自定义 body -->
			<template v-slot:body>
				<view class="slot-text">
					<view>还差{{ Number(item.ggQuat) - Number(item.members.totalCount) }}人拼成</view>
					<view style="display: flex">
						<text>剩余:</text>
						<uni-countdown :show-day="false" :second="86400" />
					</view>
				</view>
			</template>
			<!-- 自定义 footer-->
			<template v-slot:footer>
				<view style="display: flex">
					<u-button size="small" customStyle="background-color:#CD5555; color: #fff" @click="goToSpellOrder(item)">去拼单</u-button>
				</view>
			</template>
		</uni-list-item>
	</uni-list>
</template>

<script>
	import {
		mapGetters
	} from "vuex";

	export default {
		data() {
			return {
				tempImageUrl: "http://jdc.jd.com/img/100x100/",
			};
		},

		onLoad(params) {
			console.log(params)
		},

		computed: {
			...mapGetters({
				activityItem: "activityInfo/currentActivityItem",
				spellOrders: "activityInfo/currentActivityItemSpellOrders",
				organizationGateway: "globalInfo/organizationGateway",
				defaultImageBase64: "globalInfo/defaultImageBase64",
				activity: "activityInfo/activity",
			}),
		},

		methods: {
			goToSpellOrder(item) {
				let giUuid = this.activityItem.giUuid;
				let gpUuid = this.activityItem?.gpUuid;
				let ggUuid = item.ggUuid;
				uni.navigateTo({
					url: `/pages/activities/spell_order_detail?giUuid=${giUuid}&gpUuid=${gpUuid}&ggUuid=${ggUuid}`,
				});
			},
			
			getActivityItemImage(giPrph) {
				let path = "";
				if (typeof giPrph === "string") path = giPrph;
				else if (Array.isArray(giPrph) && giPrph.length > 1) {
					if (typeof giPrph[0] === "string") path = giPrph[0];
					else {
						if (new Date().getUTCTime() >= this.activity.gpStti) {
							const item = giPrph.find((item) => item.display === "3");
							path = item.path || "";
						} else {
							const item = giPrph.find((item) => item.display === "2");
							path = item.path || "";
						}
					}
				}
				else if (Array.isArray(giPrph) && giPrph.length === 1) {
					if (typeof giPrph[0] === "string") {
						path = giPrph[0];
					} else path = giPrph[0].path || "";
				}
				return path ? this.organizationGateway + "/file/download?filepath=" + path : this.defaultImageBase64;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.slot-text {
		flex: 1;
		font-size: 14px;
		margin-right: 10px;
	}
</style>
